<template>
  <div class="contact-container">
    <h1>联系开发者</h1>

    <el-card
        class="developer-card"
        v-for="(developer, index) in developers"
        :key="index"
        body-style="padding: 20px"
    >
      <template #header>
        <div class="header-container">
          <span class="developer-name">{{ developer.name }}</span>
          <div class="button-group">
            <el-button
                type="primary"
                link
                @click="copyToClipboard(developer.email)"
            >
              复制邮箱
            </el-button>
            <el-button
                type="primary"
                link
                @click="copyToClipboard(developer.phone)"
            >
              复制手机
            </el-button>
          </div>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-card
              class="contact-card"
              shadow="hover"
          >
            <div class="contact-item">
              <el-icon><Phone /></el-icon>
              <span>{{ developer.phone }}</span>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card
              class="contact-card"
              shadow="hover"
          >
            <div class="contact-item">
              <el-icon><User /></el-icon>
              <span>{{ developer.qq }}</span>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card
              class="contact-card"
              shadow="hover"
          >
            <div class="contact-item">
              <el-icon><Message /></el-icon>
              <span>{{ developer.email }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElNotification } from 'element-plus'
import {
  Phone,
  Message,
  User
} from '@element-plus/icons-vue'

const developers = ref([
  {
    name: "胡昊",
    phone: "19033823550",
    qq: "2214902964",
    email: "hh2214902964@gmail.com"
  },
  {
    name: "刘纪宇",
    phone: "17755692859",
    qq: "1946822081",
    email: "1946822081@qq.com"
  }
])

const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text)
      .then(() => {
        ElNotification({
          title: '成功',
          message: `${text} 已复制到剪贴板`,
          type: 'success',
        })
      })
      .catch(() => {
        ElNotification({
          title: '失败',
          message: '复制失败，请手动复制',
          type: 'error',
        })
      })
}
</script>

<style scoped>
.contact-container {
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
}

.developer-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.developer-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.button-group {
  display: flex;
  gap: 10px;
}

.contact-card {
  height: 100%;
  transition: all 0.3s;
}

.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 15px;
}

.contact-item .el-icon {
  margin-right: 10px;
  font-size: 20px;
  color: #409eff;
}

.el-row {
  margin: 0 !important;
}

/* 响应式布局优化 */
@media (max-width: 768px) {
  .el-col {
    margin-bottom: 15px;
  }
}
</style>